<template>
  <el-card class="box-card">
    <!-- <div class="map1"><img src="../../../../assets/image/lbx.png" /></div>
    <div class="map2"><img src="../../../../assets/image/jt.png" /></div>
    <div class="map3"><img src="../../../../assets/image/map.png" /></div> -->
    <breadcrumb :naviItems.sync="naviItems"></breadcrumb>
    <div class="container-search" v-if="showSearch">
      <!-- 控件容器 -->
      <div class="search">
        <!-- 表头搜索控件 -->
        <div class="input" style="width: 25%">
          <el-input placeholder="搜索关键词" v-model="keywords" clearable>
          </el-input>
        </div>
        <div class="input" style="width: 15%">
          <el-input placeholder="设备编号" v-model="args.GasSerialId" clearable>
          </el-input>
        </div>

        <div class="input" style="width: 15%">
          <el-input placeholder="使用单位" v-model="args.SydwName" clearable>
          </el-input>
        </div>
        <div class="input" style="width: 10%">
          <el-button type="primary" style="width: 100%">查询</el-button>
        </div>
        <div class="input" style="width: 10%">
          <el-button style="width: 100%">重置</el-button>
        </div>
        <div class="input" style="width: 10%; margin-left: 8.5%">
          <el-button type="text">高级筛选</el-button>
        </div>
      </div>
      <div class="table">
        <!-- 表格容器 -->
        <div class="container">
          <el-table
            v-loading="loading"
            :data="tableData"
            max-height="700"
            style="background-color: rgba(34, 34, 34, 0.5)"
          >
            <el-table-column fixed prop="Id" label="序号" width="120">
            </el-table-column>
            <el-table-column prop="GasSerialId" label="设备编号">
              <template slot-scope="scope">
                <el-button
                  type="text"
                  style="text-decoration: underline; color: #000000"
                  @click="gotoDetail(scope.row.GasSerialId, scope.row.GasId)"
                  >{{ scope.row.GasSerialId }}</el-button
                >
              </template>
            </el-table-column>
            <el-table-column prop="GasType" label="设备类型" width="200">
            </el-table-column>
            <el-table-column prop="Media" label="充装介质" width="150">
            </el-table-column>
            <el-table-column prop="SydwName" label="使用单位" width="400">
            </el-table-column>
            <el-table-column prop="UseData" label="使用登记数据" width="120">
            </el-table-column>
            <el-table-column prop="CheckData" label="定检数据" width="120">
            </el-table-column>
            <el-table-column prop="AddData" label="充装数据" width="120">
            </el-table-column>
          </el-table>
        </div>
      </div>
      <div class="page">
        <div class="container">
          <el-pagination
            background
            @size-change="pageSizeChange"
            @current-change="pageChange"
            :current-page="currentPage"
            :page-sizes="[10, 15, 20, 40]"
            :page-size="args.num"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </div>
      </div>
    </div>

    <div class="container-detail" v-if="showDetail">
      <!-- 这部分显示气瓶的详细数据 -->

      <!-- 这是详细数据的类型切换tabs -->
      <div class="tabs-container">
        <div class="tabs">
          <div
            class="tab use-data"
            :class="tabsClass.useData"
            @click="tabsChange('useData')"
          >
            使用登记数据
          </div>
          <div
            class="tab check-data"
            :class="tabsClass.checkData"
            @click="tabsChange('checkData')"
          >
            定检数据
          </div>
          <div
            class="tab record-data"
            :class="tabsClass.recordData"
            @click="tabsChange('recordData')"
          >
            充装数据
          </div>
        </div>
      </div>

      <div class="sub-tabs-container" v-if="tabsClass.checkData == 'active'">
        <div class="tabs">
          <div class="tab head">
            <span>共有</span>
            <span class="count">{{ gasCheckDataCount }}</span>
            <span>条定检数据记录:</span>
          </div>
          <div class="date-container">
            <div
              class="tab date"
              :class="checkDateSelectIndex == i ? 'active' : ''"
              v-for="(date, i) in checkDateList"
              :key="i"
              @click="selectCheckDate(i)"
            >
              {{ date }}
            </div>
          </div>
        </div>
      </div>

      <div class="sub-tabs-container" v-if="tabsClass.recordData == 'active'">
        <div class="tabs">
          <div class="tab head">
            <span>共有</span>
            <span class="count">{{ gasRecordDataCount }}</span>
            <span>条充装数据记录:</span>
          </div>
          <div class="date-container">
            <div
              class="tab date"
              :class="recordDateSelectIndex == i ? 'active' : ''"
              v-for="(date, i) in recordDateList"
              :key="i"
              @click="selectRecordDate(i)"
            >
              {{ date }}
            </div>
          </div>
        </div>
      </div>
      <!-- 下面是三种类型的详细数据，根据v-if指令，一次只显示一类 -->
      <!-- 使用数据 -->
      <div class="use-data detail" v-if="tabsClass.useData == 'active'">
        <div class="info-row">
          <div class="label">设备代码</div>
          <div class="value">{{ useDetail.GasSerialId }}</div>
          <div class="note">气瓶使用登记证上的设备代码</div>
        </div>
        <div class="info-row">
          <div class="label">使用登记证编号</div>
          <div class="value">{{ useDetail.RegId }}</div>
          <div class="note">指使用登记部门颁发使用登记证的编号</div>
        </div>
        <div class="info-row">
          <div class="label">单位内编号</div>
          <div class="value">{{ useDetail.InnerId }}</div>
          <div class="note">气瓶在使用单位内部的编号</div>
        </div>
        <div class="info-row">
          <div class="label">使用单位名称</div>
          <div class="value">{{ useDetail.SydwName }}</div>
          <div class="note">气瓶使用单位的名称</div>
        </div>
        <div class="info-row">
          <div class="label">气瓶品种</div>
          <div class="value">{{ useDetail.GasType }}</div>
          <div class="note">标识气瓶的类型</div>
        </div>
        <div class="info-row">
          <div class="label">充装介质</div>
          <div class="value">{{ useDetail.Media }}</div>
          <div class="note">允许气瓶充装的介质</div>
        </div>
        <div class="info-row">
          <div class="label">出厂编号</div>
          <div class="value">{{ useDetail.GasId }}</div>
          <div class="note">气瓶制造单位蚀刻或打印在气瓶表面的字符</div>
        </div>
        <div class="info-row">
          <div class="label">制造单位</div>
          <div class="value">{{ useDetail.MakeCom }}</div>
          <div class="note">气瓶制造单位的名称</div>
        </div>
        <div class="info-row">
          <div class="label">制造年月</div>
          <div class="value">{{ useDetail.MakeDate }}</div>
          <div class="note">气瓶制造的年份、月份</div>
        </div>
        <div class="info-row">
          <div class="label">公称工作压力</div>
          <div class="value">
            {{ useDetail.PublicPressure }}
            <span style="position: absolute; right: 1px">MPa</span>
          </div>
          <div class="note">最高压力/限定压力/上限值</div>
        </div>
        <div class="info-row">
          <div class="label">公称容积</div>
          <div class="value">
            {{ useDetail.RealVolume }}
            <span style="position: absolute; right: 1px">L</span>
          </div>
          <div class="note">气体容积系列中的容积等级</div>
        </div>
        <div class="info-row">
          <div class="label">瓶体设计壁厚</div>
          <div class="value">
            <span style="position: absolute; right: 1px">mm</span>
          </div>
          <div class="note">计算壁厚经圆整后所得到的壁厚</div>
        </div>
        <div class="info-row">
          <div class="label">气瓶使用状态</div>
          <div class="value">{{ useDetail.GasState }}</div>
          <div class="note">气瓶的在用、停用、丢失等情况</div>
        </div>
        <div class="info-row">
          <div class="label">二维码编号</div>
          <div class="value">{{ useDetail.TagId }}</div>
          <div class="note">气瓶瓶体二维码编号</div>
        </div>
        <div class="info-row">
          <div class="label grey">瓶组码编号</div>
          <div class="value"></div>
          <div class="note grey">瓶组框架二维码编号</div>
        </div>
      </div>

      <!-- 检验数据 -->
      <div class="check-data detail" v-if="tabsClass.checkData == 'active'">
        <div class="info-row">
          <div class="label">检验单位</div>
          <div class="value">{{ checkDetail.CheckUnit }}</div>
          <div class="note">气瓶检验单位的名称</div>
        </div>
        <div class="info-row">
          <div class="label">检验日期</div>
          <div class="value">{{ checkDetail.CheckDate }}</div>
          <div class="note">气瓶在指定检验单位进行最近一次检验的日期</div>
        </div>
        <div class="info-row">
          <div class="label">检验结果</div>
          <div class="value">{{ checkDetail.CheckResult }}</div>
          <div class="note">气瓶检验的结果</div>
        </div>
        <div class="info-row">
          <div class="label">下次检验日期</div>
          <div class="value">{{ checkDetail.NextCheckDate }}</div>
          <div class="note">气瓶在当前检验后，按规定必须再次进行检验的日期</div>
        </div>
        <div class="info-row">
          <div class="label">检验周期</div>
          <div class="value">{{ checkDetail.CheckCircle }}</div>
          <div class="note">气瓶检验的周期</div>
        </div>
        <div class="info-row">
          <div class="label grey">检验单位统一社会信用代码</div>
          <div class="value"></div>
          <div class="note grey">
            检验单位在全国范围内唯一的、终身不变的法定身份证识别码
          </div>
        </div>
        <div class="info-row">
          <div class="label grey">检验单位行政区域代码</div>
          <div class="value"></div>
          <div class="note grey">检验单位所在的行政区域代码</div>
        </div>
        <div class="info-row">
          <div class="label grey">检验单位地址</div>
          <div class="value"></div>
          <div class="note grey">检验单位的详细地址</div>
        </div>
        <div class="info-row">
          <div class="label grey">检验单位邮政编码</div>
          <div class="value"></div>
          <div class="note grey">检验单位所在地址的邮政编码</div>
        </div>
        <div class="info-row">
          <div class="label grey">检验单位负责人</div>
          <div class="value"></div>
          <div class="note grey">检验单位的负责人姓名</div>
        </div>
        <div class="info-row">
          <div class="label grey">检验单位负责人电话</div>
          <div class="value"></div>
          <div class="note grey">检验单位的负责人的联系电话</div>
        </div>
        <div class="info-row">
          <div class="label grey">检验单位许可证编号</div>
          <div class="value"></div>
          <div class="note grey">检验单位许的可证编号</div>
        </div>
        <div class="info-row">
          <div class="label grey">检验单位许可证有效期</div>
          <div class="value"></div>
          <div class="note grey">检验单位的许可证有效期</div>
        </div>
        <div class="info-row">
          <div class="label grey">检验人员</div>
          <div class="value"></div>
          <div class="note grey">进行气瓶检验作业的人员姓名</div>
        </div>
        <div class="info-row">
          <div class="label grey">检验人员代码</div>
          <div class="value"></div>
          <div class="note grey">进行气瓶检验作业的人员代码</div>
        </div>
        <div class="info-row">
          <div class="label grey">检验人员证书编号</div>
          <div class="value"></div>
          <div class="note grey">进行气瓶检验的作业人员证书编号</div>
        </div>
        <div class="info-row">
          <div class="label grey">检验人员证书有效期</div>
          <div class="value"></div>
          <div class="note grey">进行气瓶检验的作业人员证书的有效日期</div>
        </div>
      </div>

      <!-- 充装数据 -->
      <div class="record-data detail" v-if="tabsClass.recordData == 'active'">
        <div class="info-row">
          <div class="label">充装单位</div>
          <div class="value">{{ recordDetail.RecordUnit }}</div>
          <div class="note">气瓶充装单位的名称</div>
        </div>
        <div class="info-row">
          <div class="label">充装时间</div>
          <div class="value">{{ recordDetail.CzTime }}</div>
          <div class="note">在气瓶内充入介质的时间</div>
        </div>
        <div class="info-row">
          <div class="label">充装量</div>
          <div class="value">
            {{ recordDetail.CzVolume }}
            <span style="position: absolute; right: 1px">kg或L</span>
          </div>
          <div class="note">经过称量后得出的气瓶所充装的气体量</div>
        </div>
        <div class="info-row">
          <div class="label">充装密度</div>
          <div class="value">
            {{ recordDetail.Density }}
            <span style="position: absolute; right: 1px">kg/m³</span>
          </div>
          <div class="note">气瓶充装气体的密度</div>
        </div>
        <div class="info-row">
          <div class="label">充装压力</div>
          <div class="value">
            {{ recordDetail.Pressure }}
            <span style="position: absolute; right: 1px">MPa</span>
          </div>
          <div class="note">气瓶充装气体的压力</div>
        </div>
        <div class="info-row">
          <div class="label">充装温度</div>
          <div class="value">
            <span style="position: absolute; right: 1px">℃</span>
          </div>
          <div class="note">气瓶充装时的环境温度</div>
        </div>
        <div class="info-row">
          <div class="label">充装次数</div>
          <div class="value">{{ recordDetail.RecordCount }}</div>
          <div class="note">气瓶已充装的次数</div>
        </div>
        <div class="info-row">
          <div class="label grey">充装单位行政区域代码</div>
          <div class="value"></div>
          <div class="note grey">充装单位所在的行政区域代码</div>
        </div>
        <div class="info-row">
          <div class="label grey">充装单位统一社会信用代码</div>
          <div class="value"></div>
          <div class="note grey">
            充装单位在全国范围内唯一的、终身不变的法定身份证识别码
          </div>
        </div>
        <div class="info-row">
          <div class="label grey">充装单位地址</div>
          <div class="value"></div>
          <div class="note grey">充装单位的详细地址</div>
        </div>
        <div class="info-row">
          <div class="label grey">充装单位邮政编码</div>
          <div class="value"></div>
          <div class="note grey">充装单位的邮政编码</div>
        </div>
        <div class="info-row">
          <div class="label grey">充装单位负责人</div>
          <div class="value"></div>
          <div class="note grey">充装单位的负责人姓名</div>
        </div>
        <div class="info-row">
          <div class="label grey">充装单位负责人电话</div>
          <div class="value"></div>
          <div class="note grey">充装单位的负责人的联系电话</div>
        </div>
        <div class="info-row">
          <div class="label grey">充装单位许可证编号</div>
          <div class="value"></div>
          <div class="note grey">充装单位许的可证编号</div>
        </div>
        <div class="info-row">
          <div class="label grey">充装单位许可证有效期</div>
          <div class="value"></div>
          <div class="note grey">充装单位的许可证有效期</div>
        </div>
        <div class="info-row">
          <div class="label grey">充装作业人员</div>
          <div class="value"></div>
          <div class="note grey">进行气瓶充装的作业人员姓名</div>
        </div>
        <div class="info-row">
          <div class="label grey">充装作业人员编号</div>
          <div class="value"></div>
          <div class="note grey">从事当前气瓶充装作业的人员代码</div>
        </div>
        <div class="info-row">
          <div class="label grey">充装站编号</div>
          <div class="value"></div>
          <div class="note grey">气瓶充装单位所属的充装站编号</div>
        </div>
        <div class="info-row">
          <div class="label grey">充装设备编号</div>
          <div class="value"></div>
          <div class="note grey">充装气瓶的充装设备的编号</div>
        </div>
      </div>
    </div>
  </el-card>
</template>
<script>
import {
  DataCloudSearchArgs,
  serachDataCloudList,
} from "../../../../api/qiping/data-cloud";
import {
  GasUseDataSearchArgs,
  searchCheckDataList,
  searchReocrdDataList,
  searchUseDataDetail,
} from "../../../../api/qiping/data-warehouse";
import Breadcrumb from "../../../../components/QipingBreadCrumb/BreadCrumb.vue";
export default {
  name: "DataCloud",
  data() {
    return {
      args: new DataCloudSearchArgs(),
      keywords: "",
      GasSerialId: "",
      GasId: "",
      tableData: [],
      total: 0,
      currentPage: 1,
      loading: false,
      showSearch: false, // 显示搜索界面。
      showDetail: false, //显示详情页面。
      naviBasicItems: [
        { text: "气瓶" },
        { text: "数据仓储", to: "/qiping/dataWarehouse" },
      ],
      naviItems: [],
      tabsClass: {
        useData: "active",
        checkData: "",
        recordData: "",
      },
      useDetail: {},
      checkDetail: {},
      gasCheckDataList: [],
      gasCheckDataCount: 0,
      recordDetail: {},
      gasRecordDataList: [],
      gasRecordDataCount: 0,
      checkDateList: [
        "",
        "",
        "",
        "",
        "",
        "",
        "",
        "",
        "",
        "",
        "",
        "",
        "",
        "",
        "",
        "",
        "",
        "",
        "",
      ],
      checkDateSelectIndex: 0,
      recordDateList: [
        "",
        "",
        "",
        "",
        "",
        "",
        "",
        "",
        "",
        "",
        "",
        "",
        "",
        "",
        "",
        "",
      ],
      recordDateSelectIndex: 0,
    };
  },
  created() {
    if (!this.$route.params.GasSerialId) {
      // url不带GasSerialId,进入搜索界面
      // 搜索界面的一些参数的初始化
      this.naviItems = [...this.naviBasicItems];
      this.showSearch = true;
      this.showDetail = false;
      this.args.SydwName = null;
      this.args.GasSerialId = null;
      this.args.GasId = null;
      this.args.offset = 0;
      this.args.num = 10;
      this.getListData();
    } else {
      // url带GasSerialId，进入GasSerialId对应的详情界面
      // 详情界面的一些参数的初始化
      console.log(this.$route.params);
      // 集成到当前项目后由于vue-admin-template的一些特性，一级菜单重定向时不能识别路由参数，故在此重新重定向一次
      if (this.$route.params.GasSerialId == ":GasSerialId") {
        this.$router.replace({
          name: "reload",
          params: {
            to: "/qiping/dataWarehouse/index",
          },
        });
      }
      this.naviItems = [
        ...this.naviBasicItems,
        {
          text: this.$route.params.GasSerialId,
          to:
            "/qiping/dataWarehouse/index" +
            "/" +
            this.$route.params.GasSerialId +
            "/" +
            this.$route.params.GasId,
          color: "red",
        },
      ];
      this.showSearch = false;
      this.showDetail = true;
      this.GasSerialId = this.$route.params.GasSerialId;
      this.GasId = this.$route.params.GasId;
      // 默认选中使用登记数据tab
      this.tabsClass = {
        useData: "active",
        checkData: "",
        recordData: "",
      };
      this.getUseDataDetail(this.GasSerialId, this.GasId);
    }
  },
  components: {
    Breadcrumb,
  },
  methods: {
    getRowClass({ row, column, rowIndex, columnIndex }) {
      console.log("调用行样式");
      return {
        background: "#06134A",
        color: "#72C22D",
      };
    },
    // 向后端发请求获得列表数据
    async getListData() {
      this.loading = true;
      const res = await serachDataCloudList(this.args);
      if (res.data != null) {
        // this.$message({
        //   message: '数据获取成功',
        //   type: 'success',
        //   offset: 100,
        // })
      }
      this.loading = false;
      // console.log(res)
      const { list, total } = res.data;
      this.total = total;
      // 填充登记数据，定检数据，重装数据三列
      list.map((item) => {
        if (item.SydwName != "" || item.SydwName != null) {
          item.UseData = "√";
        }
        if (item.CheckDate != "" || item.CheckDate != null) {
          item.CheckData = "√";
        }
        if (item.AddDate != "" || item.AddDate != null) {
          item.AddData = "√";
        }
      });
      this.tableData = list;
    },
    // 向后端发送请求获取使用数据
    async getUseDataDetail(GasSerialId, GasId) {
      if (!GasSerialId || !GasId) return;
      const res = await searchUseDataDetail({ GasSerialId, GasId });
      this.useDetail = res.data;
      // console.log(this.useDetail)
      // 获取检验周期
      this.useDetail.CheckCircle =
        Math.round(
          (new Date(this.useDetail.NextCheckDate) -
            new Date(this.useDetail.CheckDate)) /
            (1000 * 3600 * 24 * 365)
        ) + "年";
      this.checkDateList.shift();
      this.checkDateList.unshift(this.useDetail.CheckDate);
      this.recordDateList.shift();
      this.recordDateList.unshift(this.useDetail.AddDate);
    },

    // 获取定检数据列表
    async getCheckDataList() {
      // 获取定检数据列表
      const { list, total } = (await searchCheckDataList({ GasId: this.GasId }))
        .data;
      // 获取检查日期列表
      this.checkDateList = list.map((item) => item.CheckDate);
      this.gasCheckDataCount = +total;
      // 默认选中第一个（index=0）
      if (list && list.length > 0) {
        this.checkDateSelectIndex = 0;
        this.gasCheckDataList = list;
        this.checkDetail = list[0];
        this.checkDetail.CheckCircle =
          Math.round(
            (new Date(this.checkDetail.NextCheckDate) -
              new Date(this.checkDetail.CheckDate)) /
              (1000 * 3600 * 24 * 365)
          ) + "年";
      }
    },
    // 获取充装数据列表
    async getRecordDataList() {
      const { list, total } = (
        await searchReocrdDataList({ GasId: this.GasId })
      ).data;
      // 获取检查日期列表
      this.recordDateList = list.map((item) => item.CzTime.slice(0, 10));
      this.gasRecordDataCount = +total;
      // 默认选中第一个（index=0）
      this.recordDateSelectIndex = 0;
      this.gasRecordDataList = list;
      if (this.gasRecordDataCount > 0) {
        // 如果有充装数据的话
        this.recordDetail = list[0];
        this.recordDetail.RecordCount =
          this.gasRecordDataCount - this.recordDateSelectIndex;
      }
    },

    // 页面大小改变
    async pageSizeChange(pageSize) {
      this.args.num = pageSize;
      this.args.offset = 0;
      this.getListData();
    },
    // 页数改变
    async pageChange(page) {
      console.log("现在是第 ", this.currentPage, " 页");
      this.args.offset = (page - 1) * this.args.num;
      this.currentPage = page;
      this.getListData();
    },

    // 跳转到详情页面
    async gotoDetail(GasSerialId, GasId) {
      this.$router.replace({
        name: "reload",
        params: {
          to: "/qiping/dataWarehouse/index/" + GasSerialId + "/" + GasId,
        },
      });
    },

    // 切换tabs
    async tabsChange(tab) {
      switch (tab) {
        case "useData":
          this.tabsClass = {
            useData: "active",
            checkData: "",
            recordData: "",
          };
          this.getUseDataDetail(this.GasSerialId, this.GasId);
          break;
        case "checkData":
          this.tabsClass = {
            useData: "",
            checkData: "active",
            recordData: "",
          };
          this.getCheckDataList();
          break;
        case "recordData":
          this.tabsClass = {
            useData: "",
            checkData: "",
            recordData: "active",
          };
          this.getRecordDataList();
          break;
        default:
          break;
      }
    },

    // 选中定检日期sub-tab
    async selectCheckDate(index) {
      console.log("index:", index);
      console.log(this.checkDateList[index]);
      this.checkDateSelectIndex = index;
      this.checkDetail = this.gasCheckDataList[index];
      this.checkDetail.CheckCircle =
        Math.round(
          (new Date(this.checkDetail.NextCheckDate) -
            new Date(this.checkDetail.CheckDate)) /
            (1000 * 3600 * 24 * 365)
        ) + "年";
    },
    // 选中充装日期sub-tab
    async selectRecordDate(index) {
      this.recordDateSelectIndex = index;
      this.recordDetail = this.gasRecordDataList[index];
      this.recordDetail.RecordCount =
        this.gasRecordDataCount - this.recordDateSelectIndex;
    },
  },
};
</script>
<style lang="less" scoped>
div.box-card {
  .map1,
  .map2,
  .map3 {
    position: absolute;
    opacity: 0.5;
  }
  .map1 {
    margin-left: 580px;
    margin-top: 230px;
    z-index: 2;
    animation: myfirst2 15s infinite linear;
  }
  .map2 {
    margin-left: 625px;
    margin-top: 275px;
    z-index: 3;
    opacity: 0.2;
    animation: myfirst 10s infinite linear;
  }
  .map3 {
    margin-left: 650px;
    margin-top: 300px;
    z-index: 1;
  }
  .map1,
  .map2,
  .map3 {
    top: 40px;
  }
  @keyframes myfirst2 {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(359deg);
    }
  }

  @keyframes myfirst {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(-359deg);
    }
  }
}
div.container-search {
  z-index: 5;
  padding: 20px;
  display: flex;
  flex-direction: column;
  div.search {
    width: 100%;
    // height: 200px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    div.input {
      padding: 5px;
    }
    margin-bottom: 20px;
  }
  div.table {
    z-index: 5;
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    div.container {
      width: 95.5%;
      position: relative;
      left: -15px;
    }
  }
  div.page {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    position: relative;
    right: 70px;
  }
}
div.container-detail {
  padding: 20px;
  display: flex;
  flex-direction: column;
  min-height: 800px;
  div.tabs-container {
    div.tabs {
      display: flex;
      flex-direction: row;
      div.tab {
        flex-grow: 1;
        margin: 2px;
        background: #d9d9d9;
        color: black;
        font-weight: 500;
        font-size: 15px;
        text-align: center;
        height: 40px;
        line-height: 40px;
      }
      div.tab.active {
        background: #bdd8ee;
      }
      div.tab:hover {
        cursor: pointer;
        background: #bdd8ee;
      }
    }
  }

  div.sub-tabs-container {
    position: relative;
    bottom: 4px;
    div.tabs {
      border-top: 5px solid #bdd8ee;
      display: flex;
      flex-direction: row;
      // flex-wrap: wrap;
      // justify-content: space-between;
      margin: 2px;
      div.head {
        padding: 0 20px 0 20px;
        margin-right: 5px;
        width: 20%;
        background: #d9d9d9;
        height: 35px;
        text-align: center;
        line-height: 35px;
        font-weight: 450;
        font-size: 14px;
        color: black;
        span.count {
          padding-left: 10px;
          padding-right: 12px;
          position: relative;
        }
        span.count::after {
          content: "____";
          position: absolute;
          left: 1px;
          margin-top: 2px;
        }
      }
      div.date-container {
        display: flex;
        flex-direction: row;
        overflow: scroll;
        overflow-y: hidden;
        width: 80%;
        div.tab {
          background: #d9d9d9;
          height: 35px;
          min-width: 160px;
          text-align: center;
          line-height: 35px;
          font-weight: 450;
          font-size: 14px;
          color: black;
        }
        div.tab.date {
          margin-left: 2px;
          margin-right: 2px;
        }

        div.tab.date.active {
          background: #c5e0b4;
        }
        div.tab.date:hover {
          background: #c5e0b4;
          cursor: pointer;
        }
      }
    }
  }
  div.detail {
    z-index: 5;
    display: flex;
    flex-direction: column;
    margin-top: 10px;
    background: #f2f2f2;
    padding-top: 5px;
    padding-bottom: 5px;

    div.info-row {
      display: flex;
      flex-direction: row;
      width: 80%;
      color: black;
      div.label {
        margin: 2px;
        padding: 2px;
        width: 200px;
        text-align: justify;
        text-align-last: justify;
        position: relative;
        margin-right: 5px;
      }
      div.label::after {
        content: ":";
        position: absolute;
      }
      div.value {
        margin: 2px;
        padding: 2px;
        min-width: 35%;
        background: #ffffff;
        position: relative;
        text-align: center;
        padding-right: 100px;
      }
      div.note {
        margin: 2px;
        padding: 2px;
        width: 35%;
        margin-left: 50px;
      }
      div.grey {
        color: grey;
      }
    }
  }
  div.use-data {
  }
  div.check-data {
  }
  div.record-data {
  }
}
</style>